<template>
  <div class="custinfo">
    <!-- 用户信息页面 -->
    <div class="cust_tit">
      <img :src="img1" alt="" />
      <span>客户详情</span>
      <img :src="img2" alt="" />
    </div>
    <!-- 头像信息页面 -->
    <div class="cust_img">
      <div class="shang">
        <div class="tu">
          <img :src="img3" alt="" />
        </div>
        <div class="ming">
          <div class="kk">
            <span>{{visitVal.custName}}</span>
          </div>
          <div><span>录入人：</span><span>李大雷</span></div>
        </div>
      </div>
      <div class="xia">
        <img :src="img4" alt="" />
        <span>基本信息</span>
      </div>
    </div>
    <!-- 主体信息详情 -->
    <div class="cust_info">
      <ul>
        <li>
          <p>拜访标题</p>
          <p>{{visitVal.visitTitle}}</p>
        </li>
        <li>
          <p>拜访时间</p>
          <p>{{visitVal.visitTime}}</p>
        </li>
        <li>
          <p>拜访地址</p>
          <p>{{visitVal.visitAddress}}</p>
        </li>
        <li>
          <p>拜访原因</p>
          <p>{{visitVal.visitReason}}</p>
        </li>
        <li>
          <p>拜访情况</p>
          <p>{{visitVal.visitSituation}}</p>
        </li>
        <li>
          <p>竞争信息情况</p>
          <p>{{visitVal.collectSituation}}</p>
        </li>
        <li>
          <p>创建时间</p>
          <p>{{visitVal.createTime}}</p>
        </li>
      </ul>
    </div>
    <!-- 编辑信息页面 -->
    <router-view></router-view>
  </div>
</template>

<script>
import { GetVisitinfo } from "@/request/api";
export default {
  data() {
    return {
      img1: require("@/assets/返回.png"),
      img2: require("@/assets/首页按钮.png"),
      img3: require("@/assets/touxiang.png"),
      img4: require("@/assets/基本信息.png"),

      visitVal:""
    };
  },
  created() {
    GetVisitinfo({
      id: this.$route.query.id,
    }).then((res) => {
    //   console.log(res.data);
      this.visitVal = res.data
    });
  },
};
</script>
 
<style lang = "less" scoped>
.custinfo {
  min-height: 100%;
  width: 100%;
  background-color: #efefef;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  /* 头部样式 */
  .cust_tit {
    padding: 0.3rem 0.2rem 0.1rem;
    background-color: #003399;
    color: white;
    font-size: 0.18rem;
    display: flex;
    justify-content: space-between;
    img {
      width: 0.2rem;
      height: 0.2rem;
    }
  }
  /* 头像样式 */
  .cust_img {
    height: 1.5rem;
    width: 100%;
    background-color: #003399;
    .shang {
      height: 0.9rem;
      display: flex;
      justify-content: space-between;
      margin-left: 0.3rem;
      padding-top: 0.1rem;
      .tu {
        height: 0.7rem;
        width: 0.7rem;
        img {
          width: 100%;
        }
      }
      .ming {
        flex: 1;
        margin-left: 0.15rem;
        color: white;
        line-height: 0.25rem;
        .kk {
          margin-top: 0.1rem;
        }
      }
      .bianji {
        background-color: rgba(255, 255, 255, 0.3);
        height: 0.25rem;
        color: white;
        text-align: center;
        line-height: 0.25rem;
        margin-top: 0.2rem;
        padding: 0.03rem 0.1rem;
        border-radius: 0.15rem 0 0 0.15rem;
      }
    }
    .xia {
      width: 92%;
      height: 0.5rem;
      margin: 0 auto;
      background-color: white;
      border-radius: 0.1rem 0.1rem 0 0;
      line-height: 0.3rem;
      padding: 0.1rem;
      box-sizing: border-box;
      font-size: 0.16rem;
      font-weight: 600;
      border: 0.01rem dotted #ccc;
      img {
        width: 0.25rem;
        vertical-align: -0.06rem;
        margin-right: 0.1rem;
      }
    }
  }
  /* 主体信息样式 */
  .cust_info {
    width: 92%;
    background-color: white;
    margin: 0 auto;
    height: 5.2rem;
    background: url("../assets/底纹.png") -0.14rem;
    background-size: 110% 110%;
    ul {
      li {
        display: flex;
        p {
          line-height: 0.35rem;
          &:nth-child(1) {
            flex: 3;
            text-align: right;
            color: #aaa;
          }
          &:nth-child(2) {
            flex: 8;
            margin-left: 0.05rem;
          }
        }
      }
    }
  }
}
</style>